<template>
  <div>
    <a-empty class="card-empty" v-if="tododata.length == 0 ? true : false"/>
    <a-table
      v-if="tododata.length > 0"
      ref="table"
      size="default"
      row-key="index"
      :show-header="false"
      :pagination="false"
      :data-source="tododata"
      :scroll="{ y: 263 }"
      class="todo-table kos9922d-table"
      :rowClassName = "rowClassNameSetting"
      :rowKey = "(record) => record.id"
    >
      <a-table-column title="">
        <template slot-scope="text, record" >
          <div class="todo-table-column">
            <div class="todo-table-content">
              <div>{{ $t('all.autotext1156') }}：{{ record.applyNo }}</div>
              <div :class=" record.daysDiff ? 'todo-table-date-status-2' :'todo-table-date'">
                {{ record.createTime | moment('YYYY-MM-DD') }}
              </div>
            </div>
            <div class="todo-table-right">
              <div class="todo-table-icon">
                <a-icon type="right"/>
              </div>
              <div class="todo-table-status" @click="handleGo(record)">
                {{ record.title }}
              </div>
            </div>
          </div>
        </template>
      </a-table-column>
    </a-table>
  </div>
</template>

<script>
import { listTodoByPage } from '@/api/system/message'
export default {
  name: 'toDoIndex',
  props: ['proId'],
  data () {
    return {
      tododata: [],
      queryParam: {
        auditStatus: '0,2',
        proId: localStorage.getItem('CURRENT_PROID') || '',
        systemId: this.$const.SYSTEM_TYPE.PAYMENT.value
      }
    }
  },
  created () {
    this.getToDoList()
  },
  methods: {
    async getToDoList () {
      const res = await listTodoByPage(this.queryParam)
      this.tododata = res.page.content
      // 获取已耗时几天
      this.tododata.forEach((item) => {
        let currentTime = new Date().getTime()
        let givenTime = item.createTime
        let timeDiff = currentTime - givenTime
        let daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))
        if (daysDiff > 1) {
          item.daysDiff = daysDiff
        }
      })
      // this.tododata = this.tododata.splice(0, 4)
    },

    // 去处理
    handleGo (item) {
      if (item.refuseOrRevokeFlag) {
        this.$router.push({
          name: 'ApplyDetail',
          query: {
            id: item.costId,
            status: item.costStatus
          }
        })
        return
      }
      this.$router.push(`/expense-audit?from=high&costId=${item.costId}`)
    },

    rowClassNameSetting (record) {
      return record.daysDiff ? 'row-class-postpone' : ''
    },
    cutlength (text, len) {
      if (text.length >= len) {
        text = text.substring(0, len) + '...'
      }
      return text
    }
  },
  watch: {
    proId (val) {
      if (val) {
        this.queryParam.proId = val
        this.$nextTick(() => {
          this.getToDoList()
          this.$forceUpdate()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .todo-table {
    border: none;
  }
  
  .todo-table-column {
    width: 100%;
  }

  .todo-table-content {
    height: 44px;
    font-size: 14px;
    font-family: PingFangSC;
    color: #333333;
    float: left;
    cursor: pointer;
  }

  .todo-table-content:hover {
    color: #1DABC3;
  }

  .todo-table-text {
    font-size: 14px;
    height: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    line-height: 24px;
    color: #333;
  }
  .todo-table-text-status-2{
    .todo-table-text;
    color: #1DABC3;
  }

  .todo-table-date {
    height: 22px;
    font-size: 14px;
    line-height: 24px;
    color: #666666;
  }

  .todo-table-date-status-2{
    .todo-table-date;
    color: #1DABC3;
  }

  .todo-table-right {
    float: right;
    height: 44px;
    vertical-align: middle;
    line-height: 44px;
  }

  .todo-table-status {
    cursor: pointer;
    // font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    // color: #FFFFFF;
    float: right;
    .pending-status{
      border-radius: 2px;
      background: #ECFAFF; border-color: #26C4D9;color: #26C4D9; font-size: 12px;
    }
    .postpone-status{
      border-radius: 2px;
      background: rgba(247,153,37,0.1); border-color: rgba(247,153,37,0.5);color: #F79925; font-size: 12px;
    }
  }

  .todo-table-icon {
    width: 10px;
    font-size: 14px;
    color: #8991A3;
    float: right;
    text-align: center;
  }

  
</style>

<style >
  .kos9922d-table .ant-table-tbody > tr > td{
    border-bottom: 0px !important;
  }
  .kos9922d-table .row-class-postpone{
    /* background-color: #F0FFFE !important; */
  }
</style>
